<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Group</title>
    <script type="text/javascript" src="esl.js"></script>
</head>
<body>
    <div id="Main" style="width:600px;height:400px;"></div>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });
    require(
        [
            "zrender",
            'zrender/graphic/shape/Circle',
            'zrender/container/Group'
        ],
        function(zrender, CircleShape, Group){

            // 初始化zrender
            var zr = zrender.init( document.getElementById("Main") );
            var circle = new CircleShape({
                scale : [1, 1],
                shape : {
                    cx : 0,
                    cy : 0,
                    r : 100
                }
            });

            var g1 = new Group({
                position: [100, 100]
            });
            g1.add(circle);

            var g2 = new Group();
            g2.add(g1);

            var g3 = new Group();
            g3.add(g2);

            var g4 = new Group();
            g4.add(g3);

            circle.on('click', function(e) {
                console.log('Circle');
            });
            g1.on('click', function(e) {
                console.log('Group 1');
            });
            g2.one('click', function(e) {
                console.log('Group 2 should be triggered once');
            });
            g3.on('click', function(e) {
                console.log('Group 3');
                e.cancelBubble = true;
            });
            g4.on('click', function(e) {
                console.log("Group 4 should not be triggered");
            })

            zr.add(g4);
        })
    </script>
</body>
</html>